<template>
	<view class="w-100 ">
		<view class="w-100 px-3 pt-3 re z-999">
			<TabBar :list="list" :list_id="list_id" @get_change="get_list"></TabBar>
		</view>
		<view class=" w-100 fixed bottom0 left0 right0 bg-f8ff" :class="'top'+map_top">
			<view class="w-100 h140 ty-circle"></view>
			<view class="w-100 ab top140 left0 bottom140">
				<Movable :item="movable_info"/>
			</view>
			<view class="w-100 h140"></view>
		</view>
		
		<uni-popup type="center" ref="point_popup" class="z-9999 re">
			<view class="re w696">
				<image src="../../static/icon_popup_top.png" class="w696 h394 re z-99" />
				<view class="w-100 h576"></view>
				<view class="w-100 ab left0 top20 fs-n-c z-999 pl-2">
					<view class="w-100 ab left68 top180 t-0">
						<view class="w86 h46 bg-white circle12 font32 font600 f-c-c">{{point_info.code}}</view>
						<view class="w-100 pt-1 font45 font700">{{point_info.name}}</view>
					</view>
					<view class="ab top0 right58">
						<image src="../../static/icon_equity_3.png" class="w280 h280" />
					</view>
				</view>
				<view class="ab left0 w-100 z-99 circle40 ov-hd top224">
					<view class="w-100 h118 bg-f8ff">
						<view class="w-100 h118 bg-theme rounded-40"></view>
					</view>
					<view class="w-100 h576 bg-theme">
						<view class="w-100 h576 bg-f8ff rounded-40-bottom">
							<view class="w-100 px-2-6">
								<view class="w-100 p-4 content-info ov-hd-y h576">
									<view class="w142 h44 circle12 bg-theme font28 font600 t-0 f-c-c">展具介绍</view>
									<view class="w-100 pt-1 font28 t-1 pb-3 line-ht">
										{{point_info.content}}
									</view>
									
									<view class="w-100 h1 bg-ccc"></view>
									<view class="w-100 h30"></view>
									
									<view class="w142 h44 circle12 bg-theme font28 font600 t-0 f-c-c">点亮任务</view>
									<view class="w-100 pt-1 font28 t-1 pb-3 re line-ht">
										<view>扫一扫展具上的二维码，</view>
										<view>点亮展具，获取{{point_info.name}}徽章！</view>
										<view class="w164 h64 bg-white show0 circle20 f-c-c ab right0" style="top:-28rpx" @click="set_scanCode">
											<image src="../../static/icon_code.png" class="w48 h36 mr-05" />
											扫一扫
										</view>
									</view>
									
									<view class="w-100 ov-hd bg-white circle20">
										<view class="w-100 h44 bg-theme f-c-c font28 t-0 font600">家长TIPS</view>
										<view class="font28 w-100 px-2-4 py-2 t-0">{{point_info.tips}}</view>
									</view>
									
									<!-- <view class="w-100 h30"></view>
									<view class="w-100 h1 bg-ccc"></view> -->
									<!-- <view class="w-100 h30"></view> -->
									
									<!-- <view class="w-100 h208 circle34 ov-hd re show0">
										<image src="../../static/img/img_user.png" class="w-100 h-100" />
										
										
										<view class="w200 border-rd-xiao re h54 f-c-c font28 t-0 font600 bg-theme ab bottom0 left0 z-99">
											<HornMarginTheme type="left-top" :width="44" :height="40" />
											小树推荐
										</view>
										
										<view class="w400 h300 ab bottom0 right0 z-99 bg-white border-rd-cont"></view>
										
										<view class="w270 h208 ab top0 right0 z-999 t-a f-c-c">
											<view>
												<view class="font24 t-8">专业课</view>
												<view class="font32 t-0 font600">意式咖啡-初阶</view>
												<view class="font18 t-8">2022.07.21 - 2022.08.05</view>
											</view>
										</view>
									</view> -->
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="f-c-c ab left0 w-100 z-99" style="bottom: -36rpx;">
				<image src="../../static/icon_close.png" @click="set_close" class="w88 h88 p-2 bg-theme"/>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	import Movable from "./components/movable.vue"
	import TabBar from "./components/tab_bar.vue"
	
	import { mapFloor } from "../../api/map/map.js"
	import HornMarginTheme from "../../components/horn_margin_theme_c.vue"
	
	import scanCode from "../../common/scan_code.js"
	
	export default{
		mixins:[scanCode],
		components:{Movable,TabBar,HornMarginTheme},
		data(){
			return{
				list:[
					// 生命科学是两层，地球科学是三层，其余只有一层
					// SCIENCE_TECHNOLOGY:科学技术/MUSIC_ART:音乐艺术/LIFE_SCIENCES:生命科学/GEOLOGICAL_GEOGRAPHY:地质地理
					{title:"科学技术",code:"SCIENCE_TECHNOLOGY",},
					{title:"音乐艺术",code:"MUSIC_ART",},
					{title:"生命科学",code:"LIFE_SCIENCES",},
					{title:"地质地理",code:"GEOLOGICAL_GEOGRAPHY"},
				],
				list_id:"SCIENCE_TECHNOLOGY",
				movable_info:{}, // 数据下发 
				map_top:0,
				query:{
					type:"SCIENCE_TECHNOLOGY"
				}
			}
		},
		computed:{
			...mapState('map',['point_info'])
		},
		created() {
			this.get_data_list()
			const {statusBarHeight} = uni.getStorageSync("systemInfo") 
			let bar_hright = statusBarHeight/(uni.upx2px(100)/100)  // 状态栏高度
			this.map_top = bar_hright + 100 + 80  //+140 // 100 头部标题栏 80 顶部导航栏 // 140 地图分类 
		},
		mounted() {
			// this.$refs.point_popup.open()	
		},
		methods:{
			get_list(val){
				this.list_id = val.code
				this.query.type = val.code
				this.get_data_list()
			},
			async get_data_list(){
				const {body} = await mapFloor(this.query)
				this.movable_info = body
			},
			show_point(){
				this.$refs.point_popup.open()
			},
			// 关闭
			set_close(){
				this.$refs.point_popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ty-circle{
		border-radius: 0 80rpx 0 0;
	}
	.rounded-40{
		border-radius: 0 0 0 40rpx;
	}
	.rounded-40-bottom{
		border-radius: 0 40rpx 0 0;
	}
	.border-rd-xiao{
		border-radius: 0 34rpx 0 0;
	}
	.border-rd-cont{
		border-radius: 144rpx 0 0 160rpx;
		top: -50rpx;
		right: -130rpx;
	}
	.content-info{
		&::-webkit-scrollbar {  
		      width: 16rpx !important;  
		      height: 1rpx !important;  
		}  
		&::-webkit-scrollbar-thumb { //滑块部分  
		      border-radius: 10rpx !important;  
		      background-color: #BAF247 !important;  
		}  
		&::-webkit-scrollbar-track { //轨道部分  
		      background: #F1F1F1 !important;  
		      border-radius: 10rpx !important;  
		}
	}
</style>